<template>
  <div class="font-size">
    <el-dialog
      v-model="dialogFormVisible"
      title="编辑"
      width="30%"
      draggable
      overflow
    >
      <el-form ref="ruleFormRef" :model="state.form" :rules="state.formRules">
        <el-form-item
          label="平台店铺Id:"
          :label-width="formLabelWidth"
          :rules="propCheck"
          prop="thirdShopId"

        >
          <el-input
            v-model="state.form.thirdShopId"
            type="text"
             style="width: 56% !important"
            placeholder="请输入平店铺id"
          />
          <span class="notice">请谨慎修改平台店铺id</span>
        </el-form-item>
        <el-form-item label="是否绑定聚水潭:" :label-width="formLabelWidth">
          <el-select
            style="width: 90% !important"
            v-model="state.form.isBindJst"
            placeholder="请选择是否绑定聚水潭"
          >
            <el-option
              v-for="item in state.isBindJst"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button @click="save" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import { ref, reactive, defineExpose, defineProps, defineEmits } from 'vue'
// import { UpdateCompanyShopInfo } from '@/common/api/mall/home.ts'
import { ElMessage } from 'element-plus'
import * as _ from 'lodash'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const emit = defineEmits(['update'])
const state = reactive({
  isBindJst: [
    {
      id: '1',
      label: '是',
      value: true
    },
    {
      id: '2',
      label: '否',
      value: false
    }
  ],
  form: {},
  formRules: {
    thirdShopId: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value == '') {
            callback(new Error(`平台店铺Id不能为空`))
            return
          }
          if (!/^[a-zA-Z0-9-]+$/.test(value)) {
            callback(new Error(`平台店铺Id输入不正确`))
            return
          }

          callback()
        }
      }
    ]
  }
})
let options = []
const ruleFormRef = ref()
const save = async () => {
  let params = {
    id: state.form.id,
    thirdShopId: state.form.thirdShopId
  }
  params.isBindJst = state.form.isBindJst == '1' ? true : false

  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      // let res = await UpdateCompanyShopInfo(params)
      // if (res.code == 1) {
        ElMessage.success(res.message)
        dialogFormVisible.value = false
        emit('update')
      // }
    }
  })
}
const open = (data) => {
  state.form = _.cloneDeep(data)
  state.form.isBindJst = state.form.isBindJst ? '1' : '2'
  dialogFormVisible.value = true
  ruleFormRef.value?.resetFields()
}
defineExpose({
  open
})
</script>
  
  <style lang="scss" scoped>
.notice {
  padding-left: 10px;
  color: red;
  font-size: 12px;
}
// .fromHeader .el-select .el-input {
//   border-color: #409eff;
//   width: 120px;
// }

// .box {
//   margin-top: 20px;
//   margin-left: 140px;
//   width: 500px;
//   height: 200px;
//   border: 1px solid #e0e3e9 !important;
//   overflow: auto;
// }

// .my-popper {
//   width: 200px;
//   /* 设置下拉框宽度 */
// }

// ::v-deep .el-select {
//   width: 500px !important;
// }
// .font-size {
//   font-size: 13px;
//   font-weight: normal;
// }
</style>